<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">

	<title>Anything Zoomer | Image</title>

	<link href="http://fonts.googleapis.com/css?family=Merienda+One" rel="stylesheet">
	<link rel="stylesheet" href="demo/style.css">
	<link rel="stylesheet" href="css/anythingzoomer.css">

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
	<script src="js/jquery.anythingzoomer.js"></script>
	<script>
	$(function() {

		$(".zoom").anythingZoomer({
			overlay : true,
			edit: true,
			// If you need to make the left top corner be at exactly 0,0, adjust the offset values below
			offsetX : 0,
			offsetY : 0
		});

		$('.president')
		.bind('click', function(){
			return false;
		})
		.bind('mouseover click', function(){
			var loc = $(this).attr('rel');
			if (loc && loc.indexOf(',') > 0) {
				loc = loc.split(',');
				$('.zoom').anythingZoomer( loc[0], loc[1] );
			}
			return false;
		});

	});
	</script>
</head>

<body id="image">

<div id="main-content">

	<h1>AnythingZoomer<sup>2</sup></h1>

	<a href="https://github.com/CSS-Tricks/AnythingZoomer/zipball/master" id="dl">Download</a>

	<ul id="nav">
		<li><a href="index.html">Calendar</a></li>
		<li><a class="current" href="image.html">Image</a></li>
		<li><a href="swap.html">Swap</a></li>
		<li><a href="text.html">Text</a></li>
		<li><a href="double.html">Double</a></li>
		<li><a class="use" href="use.html">Usage</a></li>
		<li><a class="play" href="http://jsfiddle.net/Mottie/6sp2b/">Playground</a></li>
		<li><a class="issue" href="https://github.com/CSS-Tricks/AnythingZoomer/issues">Issues</a></li>
	</ul>

	<h2>Image Demo</h2>

	<p>
		<ul class="info">
			<li>A small area overlay is applied when hovered (makes it darker). It is activated by setting the "overlay" option to true (new in v2.0).</li>
			<li>The numbers in the upper right corner of the zoom window display the center of the zoom window. It is activated when the "edit" option is true; this makes it easier for you to get the coordinates you need for the target links like below (new in v2.0).</li>
		</ul>
	</p>

	<p>Target
		<a href="#" class="president" rel="88,51">George Washington</a>,
		<a href="#" class="president" rel="114,62">Thomas Jefferson</a>,
		<a href="#" class="president" rel="133,80">Theodore Roosevelt</a> or
		<a href="#" class="president" rel="160,78">Abraham Lincoln</a>
	</p>

	<hr>

	<div class="zoom">

		<div class="small">
			<img src="demo/rushmore_small.jpg" alt="small rushmore">
		</div>

		<div class="large">
			<img src="demo/rushmore.jpg" alt="big rushmore">
		</div>

	</div>

</div>

</body>

</html>